<template>
  <div class="row">
    <div class="col-6" v-for="(item, index) in rows" :key="item.id">
      <q-card class="q-ma-sm">
        <q-item
          clickable
          :to="{
            path: '/topic/' + item.id,
          }"
        >
          <q-item-section avatar>
            <q-icon name="local_offer" color="blue-5" />
          </q-item-section>
          <q-item-section>
            <q-item-label class="text-blue-4"> # {{ item.name }} # </q-item-label>
            <q-item-label caption lines="2"> 导语: {{ item.remark }} </q-item-label>
          </q-item-section>
          <q-item-section side top>
            <q-item-label caption> 关注数: {{ handleNum(item.followNum) }} </q-item-label>
            <q-item-label caption> 阅读数: {{ handleNum(item.readNum) }} </q-item-label>
          </q-item-section>
          <q-item-section side>
            <q-btn
              flat
              dense
              :loading="btnLoad[index]"
              label="取关"
              color="positive"
              @click.prevent="
                async () => {
                  btnLoad[index] = true
                  const { error } = await globalFollowTopic({
                    topicId: item.id,
                  })
                  btnLoad[index] = false
                  if (!error) {
                    rows = rows.filter((i) => i.id != item.id)
                    Ok('已取消关注')
                  }
                }
              "
            />
          </q-item-section>
        </q-item>
      </q-card>
    </div>
  </div>
  <div class="row" v-show="loading">
    <div class="col-6" v-for="item in 2" :key="item">
      <q-card class="q-ma-sm">
        <q-item clickable>
          <q-item-section avatar>
            <q-icon name="local_offer" color="blue-5" />
          </q-item-section>
          <q-item-section>
            <q-item-label>
              <q-skeleton type="text" />
            </q-item-label>
            <q-item-label caption lines="2">
              <q-skeleton type="text" />
            </q-item-label>
          </q-item-section>
          <q-item-section side top>
            <q-item-label caption>
              <q-skeleton type="text" class="w-40px" />
            </q-item-label>
            <q-item-label caption>
              <q-skeleton type="text" class="w-40px" />
            </q-item-label>
          </q-item-section>
        </q-item>
      </q-card>
    </div>
  </div>
  <q-card v-if="!loading && rows.length == 0" flat class="q-pt-sm q-ml-sm">
    <q-card-section class="text-center dark:bg-neutral-700">
      <div
        class="h-xs w-full bg-contain bg-center bg-no-repeat"
        style="background-image: url('images/no-data.svg')"
      ></div>

      <div class="text-base">无内容~</div>
    </q-card-section>
  </q-card>
  <div class="q-py-sm full-width row flex-center" v-show="!loading && rows.length != 0">
    <q-btn
      flat
      color="primary"
      :loading="loading"
      @click="
        () => {
          pageParam.pageNum++
          load()
        }
      "
      :disable="pageParam.pageNum == pageParam.totalPage"
      :label="pageParam.pageNum == pageParam.totalPage ? '已加载全部' : '加载更多'"
    />
  </div>
</template>

<script setup lang="ts">
import type { ApiType } from 'src/service/api'
import { globalFollowTopic, personalFollowTopic } from 'src/service/api'
import { useYuan } from 'src/use'
import { onMounted, ref, watch } from 'vue'

const props = defineProps<{
  userId: string
}>()

const btnLoad = ref<Array<boolean>>([])

const { Ok } = useYuan()

const pageParam = ref({
  userId: props.userId,
  pageNum: 1,
  pageSize: 20,
  totalPage: 0,
  recordCount: 0,
  text: '',
})

const { handleNum } = useYuan()

const loading = ref(false)
type rowsType = ApiType<typeof personalFollowTopic>['Return']['rows'][0]

const rows = ref<Array<rowsType>>([])

watch(
  () => props.userId,
  (val) => {
    pageParam.value.userId = val
    f5()
  },
)

onMounted(() => {
  f5()
})

const f5 = () => {
  pageParam.value.pageNum = 1
  rows.value = []
  loading.value = true
  personalFollowTopic(pageParam.value).then(({ data, error }) => {
    loading.value = false
    if (!error) {
      pageParam.value.totalPage = data.totalPage
      pageParam.value.recordCount = data.recordCount
      rows.value = data.rows
    }
  })
}

const load = async () => {
  loading.value = true
  const { data, error } = await personalFollowTopic(pageParam.value)
  loading.value = false
  if (!error) {
    pageParam.value.totalPage = data.totalPage
    pageParam.value.recordCount = data.recordCount
    rows.value.push(...data.rows)
  }
}

defineExpose({ f5 })
</script>

<style scoped></style>
